<template>
  <div>
    <p class="header" style="font-size: 5ch; font-weight: bold">
      在这里，探索所有NFT
    </p>
    <p style="color: #9c9c9c">每一项数字资产都对应一个独一无二的NFT</p>
    <!-- <div class="block" v-for="url in urls" :key="url">
    <el-image
      style="width: 100px; height: 100px;float: left; margin-left: 80px;"
      :src="url"
      :fit="fit"></el-image>
  </div> -->
    <div class="demo-image__lazy">
      <!-- <template slot-scope="scope"> -->
      <div
        class="every"
        v-for="(nft, index) in nfts"
        :key="index"
        style="
          height: 315px;
          width: 320px;
          float: left;
          margin-left: 100px;
          border-color: balck;
          box-shadow: 5px 5px 5px 5px #e4e7ed;
          border-radius: 10px;
          margin-top: 50px;
        "
        @click="dialogFunction(nft)"
      >
        <el-image
          :src="nft[4]"
          lazy
          :fit="fit"
          style="width: 320px; height: 215px; border-radius: 10px 10px 0 0"
        ></el-image>
        <p>
          {{ nft[3] }}
        </p>
        <p style="color: gray; font-size: 2px">{{ nft[5] }}</p>
      </div>
      <!-- </template> -->
    </div>
    <el-dialog
      title="数字资产版权通证信息"
      :visible.sync="dialogVisible"
    >
      <el-descriptions title="作品信息">
        <el-descriptions-item label="通证名称">{{ workname }}</el-descriptions-item>
        <el-descriptions-item label="NFT ID"><el-tag size="small" >{{ nftindex }}</el-tag></el-descriptions-item>
        
        <el-descriptions-item label="状态">{{ nftstatus }}</el-descriptions-item>
        
        <el-descriptions-item label="类型">ICT</el-descriptions-item>
        <el-descriptions-item label="认证时间：">
          {{ certifyTime }}
        </el-descriptions-item>
        <el-descriptions-item label="最近交易">
         {{ dealTime }}
        </el-descriptions-item>
        <el-descriptions-item label="价格"
          >{{ price }}</el-descriptions-item
        >
        <el-descriptions-item label="持有者"><el-tag size="small" type="info">{{ owner }}</el-tag></el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="buynft(nftindex)" :disabled = "buttondisable">购 买</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nfts: [],
      fit: "fill",
      dialogVisible: false,
      workname: "",
      nftindex: "",
      nftstatus: "",
      certifyTime: "",
      dealTime: "",
      price: "",
       owner:"",
      buttondisable:true,
    };
  },
  async Create() {},
  async mounted() {
    console.log("dispatching getContractInstance");
    this.$store.dispatch("getContractInstance");
    console.log("dispatching getContractInstance1");
    this.$store.dispatch("getContractInstance1");
    if (!this.$store.state.contractInstance) {
      console.log("dispatching getContractInstance");
      await this.$store.dispatch("getContractInstance");
    }
    this.getAllNft();
  },
  methods: {
    test() {
      this.nfts = [];
      this.getAllNft();
      //console.log(this.nfts);
    },
    async buynft(i) {
      let that = this;
      // console.log(parseInt(that.nftindex))
      console.log(this.$store.state.web3.web3Instance())
      await this.$store.state.contractInstance1().buy(        
        this.nftindex,
        {
          //gas: 300000,
          value: this.$store.state.web3.web3Instance().toWei(this.price, 'ether'),
          from: this.$store.state.web3.coinbase,
        },
        function (res) {
          console.log("buynft!");
          that.dialogVisible = false;
        }
      )
    },
    async getNFT(nid) {
      let that = this;
      await this.$store.state.contractInstance().NFTS.call(
        nid, //用call返回一个结果，不使用call，返回的则是交易id
        {
          //gas: 300000,
          from: this.$store.state.web3.coinbase,
        },
        function (err, res) {
          that.nfts.push(res);
          console.log(res);
        }
      );
      // console.log(this.returnurl)
    },

    async getAllNft() {
      let that = this;
      await this.$store.state.contractInstance().NFTID.call(
        //用call返回一个结果，不使用call，返回的则是交易id
        {
          //gas: 300000,
          from: this.$store.state.web3.coinbase,
        },
        function (err, res) {
          that.nftid = parseInt(res); //返回NFT的个数
          for (var i = 0; i < that.nftid; i++) {
            that.$store.state.contractInstance().NFTS.call(
              "" + i, //用call返回一个结果，不使用call，返回的则是交易id
              {
                //gas: 300000,
                from: that.$store.state.web3.coinbase,
              },
              function (err, res) {
                that.nfts.push(res);
                console.log(res);
              }
            );
          }
        }
      );
    },

    
    async dialogFunction(nft) {
       let that = this;
      await this.$store.state.contractInstance().ownerOf.call(
        nft[0],
        {
          gas: 300000,
          from: this.$store.state.web3.coinbase,
        },
        function (err, res) {
          //that.nftsid = res;
          that.owner = res;
          if(res==that.$store.state.web3.coinbase){
            that.buttondisable = true;
          }else{
            that.buttondisable = !nft[2];
          }
          console.log(res)
          //console.log(res)
        }
      );
      this.dialogVisible = true;
      this.workname = nft[3];
      this.nftindex = nft[0];
      
      
      this.nftstatus = nft[2] == true ? "售卖中" : "仅观赏";
      this.certifyTime = nft[6];
      this.dealTime = nft[7];
      this.price = nft[1];
    },
  },
};
</script>